﻿@model ProductReviewsModel
@inject IPageHeadBuilder pagebuilder
@{
    Layout = "_ColumnsOne";

    //title
    pagebuilder.AddTitleParts(Model.ProductName);
    pagebuilder.AddTitleParts(T("PageTitle.ProductReviews").Text);
}
<div class="page product-reviews-page">
    <h2 class="generalTitle text-center">@T("Reviews.ProductReviewsFor") <a href="@Url.RouteUrl("Product", new { SeName = Model.ProductSeName })">@Model.ProductName</a></h2>
    @await Component.InvokeAsync("Widget", new { widgetZone = "productreviews_page_top", additionalData = Model.ProductId })
    @if (Model.AddProductReview.SuccessfullyAdded)
    {
        <h4 class="text-center p-3">
            @Model.AddProductReview.Result
        </h4>
    }
    else
    {
        <div class="write-review" id="review-form">
            <h5 class="generalTitle"><strong>@T("Reviews.Write")</strong></h5>
            <form asp-route="ProductReviews" method="post">
                <div asp-validation-summary="ModelOnly" class="message-error"></div>
                <fieldset>
                    <div class="form-fields">
                        <div class="form-group">
                            <label asp-for="AddProductReview.Title" class="col-form-label">@T("Reviews.Fields.Title"):</label>
                            <input asp-for="AddProductReview.Title" class="form-control review-title" asp-disabled="@(!Model.AddProductReview.CanCurrentCustomerLeaveReview)" />
                            <span asp-validation-for="AddProductReview.Title"></span>
                        </div>
                        <label asp-for="AddProductReview.ReviewText" class="col-form-label">@T("Reviews.Fields.ReviewText"):</label>
                        <textarea asp-for="AddProductReview.ReviewText" class="form-control review-text" asp-disabled="@(!Model.AddProductReview.CanCurrentCustomerLeaveReview)"></textarea>
                        <span asp-validation-for="AddProductReview.ReviewText"></span>
                        <div class="form-group review-rating d-flex">
                            <label asp-for="AddProductReview.Rating" class="col-form-label d-inline-flex align-items-center">@T("Reviews.Fields.Rating"):</label>
                            <div class="d-inline-flex justify-content-center rating-options text-center pt-0 ml-3">
                                <label class="custom-control pl-0 custom-radio d-flex full-star">
                                    <input asp-for="AddProductReview.Rating" value="1" type="radio" id="addproductrating_1" class="custom-control-input" />
                                    <span class="custom-control-label">&#9733;</span>
                                    <span class="custom-control-description"></span>
                                </label>
                                <label class="custom-control pl-0 custom-radio d-flex full-star">
                                    <input asp-for="AddProductReview.Rating" value="2" type="radio" id="addproductrating_2" class="custom-control-input" />
                                    <span class="custom-control-label">&#9733;</span>
                                    <span class="custom-control-description"></span>
                                </label>
                                <label class="custom-control pl-0 custom-radio d-flex full-star">
                                    <input asp-for="AddProductReview.Rating" value="3" type="radio" id="addproductrating_3" class="custom-control-input" />
                                    <span class="custom-control-label">&#9733;</span>
                                    <span class="custom-control-description"></span>
                                </label>
                                <label class="custom-control pl-0 custom-radio d-flex full-star">
                                    <input asp-for="AddProductReview.Rating" value="4" type="radio" id="addproductrating_4" class="custom-control-input" />
                                    <span class="custom-control-label">&#9733;</span>
                                    <span class="custom-control-description"></span>
                                </label>
                                <label class="custom-control pl-0 custom-radio d-flex full-star">
                                    <input asp-for="AddProductReview.Rating" value="5" type="radio" id="addproductrating_5" class="custom-control-input" />
                                    <span class="custom-control-label">&#9733;</span>
                                    <span class="custom-control-description"></span>
                                </label>
                            </div>
                        </div>
                        @if (Model.AddProductReview.DisplayCaptcha)
                        {
                            <div class="captcha-box">
                                <captcha />
                            </div>
                        }
                    </div>
                </fieldset>
                <div class="buttons text-left my-3">
                    <input type="submit" name="add-review" class="btn btn-info write-product-review-button" value="@T("Reviews.SubmitButton")" disabled="@(!Model.AddProductReview.CanCurrentCustomerLeaveReview)"/>
                </div>
            </form>
        </div>
    }
    @if (Model.Items.Any())
    {
        <div class="product-review-list">
            <h5><strong>@T("Reviews.ExistingReviews")</strong></h5>
            @foreach (var review in Model.Items)
            {
                int ratingPercent = review.Rating * 20;
                <div class="card comment product-review-item mb-3">
                    <div class="card-header review-item-head pt-0 pr-0">
                        <div class="ratings justify-content-start">
                            <div class="rating-box">
                                <div class="rating" style="width: @(ratingPercent)%">
                                </div>
                            </div>
                        </div>
                        <div class="review-info">
                            <span class="user">
                                <span>@T("Reviews.From"):</span>
                                @if (review.AllowViewingProfiles)
                                {
                                    <a href="@Url.RouteUrl("CustomerProfile", new { id = review.CustomerId })">@(review.CustomerName)</a>
                                }
                                else
                                {
                                    @review.CustomerName
                                }
                            </span>
                            <span class="separator">|</span>
                            <span class="date">
                                <span>@T("Reviews.Date"):</span>
                                <span>@review.WrittenOnStr</span>
                            </span>
                        </div>
                    </div>
                    <div class="card-body mb-3">
                        <div class="review-title">
                            <strong>@review.Title</strong>
                        </div>
                        <div class="review-content">
                            <div class="review-text">
                                @review.ReviewText
                            </div>
                        </div>
                        @if (!string.IsNullOrEmpty(review.ReplyText))
                        {
                            <div class="reply-content">
                                <blockquote class="blockquote-footer">
                                    @review.ReplyText
                                    <p>@review.Signature</p>
                                </blockquote>
                            </div>
                        }
                    </div>
                    <div class="card-footer text-right">
                        @await Component.InvokeAsync("Widget", new { widgetZone = "productreviews_page_inside_review", additionalData = review.Id })
                        <partial name="_ProductReviewHelpfulness" model="review.Helpfulness" />
                    </div>
                </div>
            }
        </div>
    }
    @await Component.InvokeAsync("Widget", new { widgetZone = "productreviews_page_bottom", additionalData = Model.ProductId })
</div>

<script asp-location="Footer">
    $(document).ready(function () {
        $('.rating-options .custom-radio').on("click", function () {
            if (!$(this).find('input').is(':checked')) {
                $(this).find('.custom-control-label').html('&#9733;');
                $(this).prevAll('.custom-radio').find('.custom-control-label').html('&#9733;');
                $(this).nextAll('.custom-radio').find('.custom-control-label').html('&#x2606;');
            }
        });
    });
</script>